<template>
  <div class="background">
    <div class="forget">
      <h3 class="login-header">忘记密码</h3>
      <hr style="margin-top: 23px;"/>
      <br/>
      <InputGroup
        type="number"
        placeholder="请输入注册时的手机号"
        v-model="phone"
        :btnTitle="btnTitle"
        :disabled="disabled"
        :error="errors.phone"
        @btnClick="getVerifyCode"
      />
      <br/>
      <!-- 输入验证码 -->
      <InputGroup
        type="number"
        v-model="verifyCode"
        placeholder="请输入验证码"
        :error="errors.code"
      />
      <!--用户服务协议-->
      <div class="login_des">
        <p>
          登录趣多多即已同意
          <span>《用户服务协议》</span>
        </p>
      </div>
      <!-- 登录按钮 -->
      　　　　<br/>　　　
      <div class="login_btn">
        <button @click="handleLogin" :disabled="isClick">一键登录</button>
      </div>
    </div>
  </div>
</template>

<script>
import InputGroup from "./component/inputGroup";
    import axios from 'axios'

    export default {
        name: "Forget",
        components: {
            InputGroup
        },
        data() {
            return {
                phone: "", //手机号
                verifyCode: "", //验证码
                btnTitle: "获取验证码",
                disabled: false,  //是否可点击
                errors: {}, //验证提示信息
            }
        },
        computed: {
            //手机号和验证码都不能为空
            isClick() {
                if (!this.phone || !this.verifyCode) {
                    return true
                } else {
                    return false
                }

            }
        },
        methods: {
            handleLogin() {
                //点击发送
                this.errors = {};
                axios.post('/sms/posts/sms_back', {
                    phone: this.phone,
                    code: this.verifyCode
                }).then(res => {
                    console.log(res);
                    localStorage.setItem('ele_login', true)
                    this.$store.state.login=true
                    this.$router.push('/home')
                }).catch(err => {
                    //返回错误信息
                    this.errors = {
                        code: error.response.data.msg
                    }
                })
            },
            getVerifyCode() {
                if (this.validatePhone()) {
                    //发送网络请求
                    axios.post('/sms/posts/sms_send', {
                        tpl_id: "213266",
                        key: "9157388e54d3716806364bdd37440d02",
                        phone: this.phone
                    }).then(res => {
                        console.log(res)
                        this.validateBtn()
                    })
                }
            },
            validatePhone() {
                //验证手机号码
                if (!this.phone) {
                    this.errors = {
                        phone: "手机号码不能为空"
                    };
                    return false
                } else if (!/^1[345678]\d{9}$/.test(this.phone)) {
                    this.errors = {
                        phone: "请输入正确的手机号码"
                    }
                    return false
                } else {
                    this.errors = {}
                    return true
                }
            },
            validateBtn() {
                //倒计时
                let time = 60;
                let timer = setInterval(() => {
                    if (time == 0) {
                        clearInterval(timer);
                        this.disabled = false;
                        this.btnTitle = "获取验证码";
                    } else {
                        this.btnTitle = time + '秒后重试';
                        this.disabled = true;
                        time--
                    }
                }, 1000)
            }
        }
    }
</script>

<style lang="css" scoped>
  .background {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 4px;
    background: url("../../assets/styles/picture/login.jpg")
  }

  .forget {
    position: relative;
    width: 100%;
    height: 5px;
    padding: 30px;
    box-sizing: border-box;
    background: #fff;
  }

  .login-header {
    color: #87cefa;
    font-size: 30px;
    margin-top: -5px;
    text-align: center;
  }

  .text_group,
  .login_des,
  .login_btn {
    margin-top: 20px;
  }

  .login_des {
    color: #aaa;
    line-height: 22px;
  }

  .login_des span {
    color: #4d90fe;
  }

  .login_btn button {
    width: 100%;
    height: 40px;
    background-color: #4d90fe;
    -webkit-border-radius: 13px;
    color: white;
    font-size: 14px;
    border: none;
    outline: none;
  }

  .login_btn button[disabled] {
    background-color: lightblue;
  }
</style>
